<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label>{{ count }}</label>
    <div>getter - doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>原始形式 - user子模块中的age: {{ $store.state.user.userInfo.age }}</div>
    <!-- <div>辅助函数形式 - user子模块中的age: {{ userInfo.age }}</div> -->
    <br>
    <button @click="addCount">值 + 1</button>
    <button @click="asyncAddCount">1秒后改count</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Son1Com',
  computed: {
    // 这个 mapState 可以调用多次
    ...mapState(['count']),
    // ...mapState('user', ['userInfo']),
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['addCount']),
    asyncAddCount () {
      this.$store.dispatch('asyncAddCountN', 10)
    }
    // add () {
    //   // 去修改 vuex 中 store 中的 state
    //   // 注意：在 Vuex 中，不能在除了 mutation 以外的其他其他地方修改 state
    //   // this.$store.state.count++
    //   this.$store.commit('addCount')
    // }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
